<!--定义 Thymeleaf的代码片段，可以在多个页面复用 -->

<div class="header" th:fragment="header">

    <div class="nav clear">
        <div class="container">
            <div class="left">
                <ul>
                    <li><a href="index.html" th:href="@{/}">小米商城</a></li>
                    <li><a href="">MIUI</a></li>
                    <li><a href="">IoT</a></li>
                    <li><a href="">云服务</a></li>
                    <li><a href="">天星数科</a></li>
                    <li><a href="">有品</a></li>
                    <li><a href="">小爱开放平台</a></li>
                    <li><a href="">企业团购</a></li>
                    <li><a href="">资质证照</a></li>
                    <li><a href="">协议规则</a></li>
                    <li><a href="">下载app</a></li>
                    <li><a href="">智能生活</a></li>
                    <li><a href="">Select Location</a></li>
                </ul>
            </div>
            <div class="right">
                <ul th:if="${session.user != null}">
                    <li class="user">
                        <a href="javascript:;">
                            <span th:text="${session.user.username}">用户名</span>
                            <i class="mi-icon icon-down"></i>
                        </a>
                        <div class="user-menu">
                            <a th:href="@{/user/edit}">个人中心</a>
                            <a href="">评价晒单</a>
                            <a href="">我的喜欢</a>
                            <a href="">小米账户</a>
                            <a th:href="@{/user/logout}">退出登录</a>
                        </div>
                    </li>
                    <li><a href="">消息通知</a></li>
                    <li><a th:href="@{/user/order/list}">我的订单</a></li>
                    <li class="cart dropdown">
                        <a th:href="@{/user/cart}">
                            <i class="mi-icon icon-cart"></i>
                            购物车 (0)
                        </a>
                        <div class="dropdown-content">
                            购物车中还没有商品，赶紧选购吧！
                        </div>
                    </li>
                </ul>
                <ul th:if="${session.user == null}">
                    <li><a  th:href="@{user/login}">登录</a></li>
                    <li><a  th:href="@{user/reg}">注册</a></li>
                    <li><a href="">消息通知</a></li>
                    <li class="cart dropdown">
                        <a href="user/cart.html" th:href="@{/user/cart}">
                            <i class="mi-icon icon-cart" ></i>
                            购物车 (0)
                        </a>
                        <div class="dropdown-content">
                            购物车中还没有商品，赶紧选购吧！
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="site-header">
        <div class="container clear">
            <div class="logo left">
                <a href="index.html"><img src="/img/logo-mi.png" ></a>
            </div>
            <div class="menu left">
                <ul class="clear">
                    <li><a href="search.html">Xiaomi手机</a></li>
                    <li><a href="">Redmi 红米</a></li>
                    <li><a href="">电视</a></li>
                    <li><a href="">笔记本</a></li>
                    <li><a href="">平板</a></li>
                    <li><a href="">家电</a></li>
                    <li><a href="">路由器</a></li>
                    <li><a href="">智能硬件</a></li>
                    <li><a href="">服务</a></li>
                    <li><a href="">社区</a></li>
                </ul>
            </div>
            <form class="search right" th:action="@{/search}" method="get">
                <input type="text" name="name" id="key" class="search-key left"/>
                <button type="submit" id="search"><i class="mi-icon icon-search left"></i></button>
            </form>
        </div>
    </div>
</div>


<div class="site-footer" th:fragment="footer">
    <div class="container">
        <div class="footer-service">
            <ul class="clear">
                <li><a href=""><i class="mi-icon icon-util"></i>预约维修服务</a></li>
                <li><a href=""><i class="mi-icon icon-log"></i>7天无理由退货</a></li>
                <li><a href=""><i class="mi-icon icon-diamond"></i>15天免费换货</a></li>
                <li><a href=""><i class="mi-icon icon-heart"></i>满69包邮</a></li>
                <li><a href=""><i class="mi-icon icon-location"></i>520余家售后网点</a></li>
            </ul>
        </div>
    </div>
</div>